<template>
	<div class="meetformbox">
		<el-form label-width="80px" size="mini" label-position="left" :model="form" :rules="rules" ref="form">
			<el-row :gutter="10">
				<el-col :span="12">
					<el-form-item label="会议室名称:">
						{{val.row.RoomName}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="容纳人数:">
						{{val.row.Capacity}}人
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" v-if="val.row.Description">
				<el-col :span="24">
					<el-form-item label="备注:">
						{{val.row.Description}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="12">
					<el-form-item label="管理员:">
						{{val.row.AdminName ? val.row.AdminName: '暂无'}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="使用人:">
						{{user.UserName}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="12">
					<el-form-item  prop="inputTheme" class="requery">
						<span slot="label">会议主题<span style="color: red;margin-left: 2px" >*</span>:</span>
						<el-autocomplete v-model.trim="form.inputTheme" :fetch-suggestions="querySearch" :maxlength="100"></el-autocomplete>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="预定日期:">
						{{day}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="12">
					<el-form-item label="开始时间:">
						<el-time-select
										style="width: 100%"
										v-model="startTime"
										:picker-options="startoptions"
										placeholder="选择时间" :clearable="false">
						</el-time-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结束时间:">
						<el-time-select
										style="width: 100%"
										v-model="endTime"
										:picker-options="endoptions" placeholder="选择时间" :clearable="false">
						</el-time-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-form-item label="会议议程:" style="margin-bottom: 3px;"></el-form-item>
				<el-input
								type="textarea"
								:autosize="{ minRows: 2, maxRows: 4}"
								placeholder="请输入内容"
								v-model.trim="form.note" :maxlength="200">
				</el-input>
			</el-row>
			<el-row :gutter="10" style="margin-top: 10px;text-align: center">
				<el-button type="primary" style="margin-right:20px" plain @click="canles">关闭</el-button>
				<el-button type="primary" style="margin-left: 20px" @click="submitForm" :loading="loading">预订</el-button>
			</el-row>
		</el-form>
	</div>
</template>
<script type="es6">
import {MeetingTable} from '@/config';
import {parseTime} from '@/libs';
import {mapState} from 'vuex';
export default {
  data () {
    return {
      theme: MeetingTable.theme,
      form: {
        inputTheme: '',
        note: ''
      },
      startTime: '',
      endTime: '',
      startoptions: {
        start: '08:00',
        step: '00:15',
        end: '21:00',
        minTime: '07:59',
        maxTime: ''
      },
      endoptions: {
        start: '08:00',
        step: '00:15',
        end: '21:00',
        minTime: '',
        maxTime: '21:01'
      },
      val: {row: {}},
      rules: {
        inputTheme: [{required: true, message: '请输入会议主题', trigger: 'change'}]
      },
      loading: false
    };
  },
  props: {
    value: Object,
    default: () => {
      return {};
    },
    events: { // 当前行已预订的事件
      value: Array,
      default: () => { return []; }
    },
    day: {
      type: String,
      default: ''
    }
  },
  components: {},
  computed: {
    ...mapState({
      roles: state => state.roles,
      user: state => state.user
    })
  },
  methods: {
    querySearch (queryString, cb) {
      let restaurants = this.theme;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      cb(results);
    },
    createFilter (queryString) {
      return (restaurant) => {
        return restaurant.value.indexOf(queryString) >= 0;
      };
    },
    canles () {
      this.$emit('close');
    },
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.val.inputTheme = this.form.inputTheme;
          this.val.note = this.form.note;
          this.loading = true;
          this.val.BookerUserID = this.user.UserID;
          this.val.BookerUserName = this.user.UserName;
          this.val.ExecutorUserID = this.user.UserID;
          this.val.ExecutorUserName = this.user.UserName;
          this.$nextTick(() => {
            this.$emit('input', this.val);
            this.$emit('submit', () => {
              this.loading = false;
            });
          });
        }
      });
    },
    minMaxTime () {
      let min = '';
      let max = '';
      this.events.forEach((item) => {
        if (this.val.timeregion[0] >= item.EndTimeStamp) {
          if ((min && item.EndTimeStamp > min) || !min) {
            min = item.EndTimeStamp;
          }
        }
        if (item.BeginTimeStamp >= this.val.timeregion[1]) {
          if ((max && item.BeginTimeStamp < max) || !max) {
            max = item.BegionTimeStamp;
          }
        }
      });
      if (min) {
        this.startoptions.minTime = parseTime(new Date(min - 1), '{h}:{i}');
      }
      if (max) {
        this.endoptions.maxTime = parseTime(new Date(max + 1000 * 60), '{h}:{i}');
      }
      if (Date.now() > min) {
        this.startoptions.minTime = parseTime(new Date(Date.now() - 1000 * 60 * 15), '{h}:{i}');
      }
    }
  },
  mounted () {
    this.val = this.value;
    let startstr = parseTime(new Date(this.val.timeregion[0]), '{h}:{i}');
    this.startTime = startstr;
    this.endTime = parseTime(new Date(this.val.timeregion[1]), '{h}:{i}');
    this.minMaxTime();
    this.startoptions.maxTime = this.endTime;
    this.endoptions.minTime = this.startTime;
  },
  watch: {
    startTime (va) {
      if (va) {
        this.endoptions.minTime = va;
        let newstart = new Date(this.day.replace(/-/g, '/') + ' ' + va);
        this.val.timeregion[0] = newstart.getTime();
        this.$emit('input', this.val);
      }
    },
    endTime (va) {
      if (va) {
        this.startoptions.maxTime = va;
        let newstart = new Date(this.day.replace(/-/g, '/') + ' ' + va);
        this.val.timeregion[1] = newstart.getTime();
        this.$emit('input', this.val);
      }
    }
  }
};
</script>
<style lang="less">
	.meetformbox {
		width: 100%;
		.el-form-item__content {
			word-break: break-word;
			font-size: 12px;
		}
		.el-form-item__label {
			font-size: 12px;
		}
		.el-form-item{
			margin-bottom: 14px;
		}
		.requery.el-form-item.is-required .el-form-item__label:before{
			content: '';
			margin-right: 0px;
		}
	}
</style>
